<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bilibili-干杯~~~</title>
  <!-- 引入favicon图标 -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 引入css文件 -->
  <link rel="stylesheet" href="./css/index.css">
  <!-- 引入字体图标文件 -->
  <link rel="stylesheet" href="./fonts/iconfont.css">
</head>

<body>
  <!-- 头部模块 -->
  <header class="suspension">
    <div class="m-navbar">
      <!-- logo -->
      <a href="#" class="logo">
        <i class="iconfont Navbar_logo"></i>
      </a>
      <!-- 右侧 -->
      <div class="right">
        <a href="#" class="search">
          <i class="iconfont ic_search_tab"></i>
        </a>
        <a href="#" class="face">
          <img src="./images/login.png" alt="">
        </a>
        <div class="app-btn">
          <img src="./images/download.png" alt="">
        </div>
      </div>
    </div>
    <div class="channel-menu">
      <div class="tabs">
        <!-- 很宽的盒子 -->
        <div class="tabs-list">
          <a href="#">首页</a>
          <a href="#">动画</a>
          <a href="#">番剧</a>
          <a href="#">果蔬</a>
          <a href="#">音乐</a>
          <a href="#">舞蹈</a>
          <a href="#">鬼畜</a>
          <a href="#">吹鬼</a>
          <!-- 红色线 -->
          <div class="line"></div>
        </div>
      </div>
      <div class="after">
        <i class="iconfont general_pulldown_s"></i>
      </div>
    </div>
  </header>

  <!-- 主体部分 -->
  <div class="m-home">
    <div class="video-list">
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下电视？
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
    </div>
  </div>

  <!-- 底部模块 -->
  <footer class="app">
    <div class="btn-app">
      <i class="iconfont Navbar_logo"></i>
      打开App，看你感兴趣的视频
    </div>
  </footer>
  <script>
    // 1. 事件委托的方法 获取父元素 tabs-list
    const list = document.querySelector('.tabs-list')
    const line = document.querySelector('.line')
    // 2. 注册点击事件
    list.addEventListener('click', function (e) {
      // 只有点击了A 才有触发效果
      if (e.target.tagName === 'A') {
        // console.log(11)
        // 当前元素是谁 ？  e.target
        // 得到当前点击元素的位置
        // console.log(e.target.offsetLeft)
        // line.style.transform = 'translateX(100px)'
        // 把我们点击的a链接盒子的位置  然后移动
        line.style.transform = `translateX(${e.target.offsetLeft}px)`
      }
    })

  </script>
</body>

</html>